<div class="base-tree-container">
    <div *ngIf="showSearch" class="search">
        <nz-input-group [nzSuffix]="suffixIcon" class="terminal-root-input-group">
            <input (ngModelChange)="searchByText($event)"
                   [(ngModel)]="searchText"
                   [placeholder]="searchPlaceHolderText"
                   nz-input
                   type="text"/>
        </nz-input-group>
        <ng-template #suffixIcon>
            <i nz-icon nzType="search"></i>
        </ng-template>
    </div>
    <div [style.display]=" showSearchResultPanel ? 'none' : 'block'" [style.height]="treeContainerHeight"
         class="tree-container">
        <nz-tree #nzTree
                 (nzCheckBoxChange)="checkBoxChange($event)"
                 (nzClick)="clickNode($event)"
                 (nzExpandChange)="openEvent($event)"
                 (nzOnDragEnter)="nzOnDragEnter($event)"
                 (nzOnDragLeave)="nzOnDragLeave($event)"
                 (nzOnDragOver)="nzOnDragOver($event)"
                 (nzOnDrop)="nzOnDrop($event)"
                 *ngIf="initFinish"
                 [nzBeforeDrop]="nzBeforeDrop.bind(this)"
                 [nzCheckStrictly]="checkStrictly"
                 [nzCheckable]="checkable"
                 [nzCheckedKeys]="checkedKeys"
                 [nzData]="treeData"
                 [nzDraggable]="draggable"
                 [nzExpandedIcon]="expandedIconTpl"
                 [nzTreeTemplate]="treeNodeTemplate?treeNodeTemplate:nzTreeTemplate"
                 nzAsyncData
                 nzBlockNode
        >
        </nz-tree>
        <ng-template #nzTreeTemplate let-node>
            <span [attr.aria-grabbed]="draggable && !node.isDisabled ? true : null"
                  [attr.draggable]="draggable && !node.isDisabled ? true : null"
                  [class.active]="activatedNode?.key === node.key"
                  [class.disabled]="node.isDisabled"
                  [class.draggable]="draggable && !node.isDisabled ? true : null"
                  class="tree-node"
                  style="display: inline-block;"
            >
                <span *ngIf="showTypeIcon">
                   <i [nzType]="getTreeNodeTypeIcon(node.origin)" nz-icon theme="fill"></i>
                </span>
                <span class="title-name">{{ node.title }}</span>
            </span>
        </ng-template>
        <ng-template #expandedIconTpl let-node let-origin="origin">
            <i *ngIf="!node.isLeaf" [class.active]="activatedNode?.key === node.key"
               [nzType]="(node.isExpanded && !node.isLeaf) ? 'caret-down' : 'caret-right'"
               class="ant-tree-switcher-line-icon"
               nz-icon></i>
            <i *ngIf="node.isLeaf" class="ant-tree-switcher-line-icon" nz-icon nzType="file"></i>
        </ng-template>
    </div>
    <div [style.display]=" showSearchResultPanel ? 'block' : 'none'" [style.height]="treeContainerHeight"
         class="tree-container">
        <div class="nzList-container">
            <nz-list [nzDataSource]="searchResults" [nzItemLayout]="'horizontal'"
                     [nzRenderItem]="customListItem ? customListItem : defaultListItem">
                <ng-template #defaultListItem let-item>
                    <nz-list-item [nzActions]="[opAction]">
                        <nz-list-item-meta
                            [nzAvatar]="nzAvatar"
                            [nzDescription]="item.type"
                            [nzTitle]="item.title"
                        >
                        </nz-list-item-meta>
                        <ng-template #nzAvatar>
                            <div style="padding: 10px 0 10px 15px ">
                                <i [nzType]="getTreeNodeTypeIcon(item)" nz-icon theme="fill"></i>
                            </div>
                        </ng-template>
                        <ng-template #opAction>
                            <div style="margin-right: 18px">
                                <a (click)="itemClick(item)">定位</a>
                            </div>
                        </ng-template>
                    </nz-list-item>
                </ng-template>
            </nz-list>
        </div>
    </div>
</div>
